<template>
  <div class="wapper">
    <el-container style="100%">
      <el-main style="background:#fff;">
        <div class="table-wrap" v-show="listShow">
          <div class="handle-box3 handle-bottom">
            <div class="uers-right uers-right-buttom">
              <span class="btn-r">
                <el-button type="primary" plain icon="el-icon-plus" @click="addSubmit">新增</el-button>
              </span>
            </div>
          </div>
          <div class="tabbox">
          <el-table
            :data="dataList"
            height="100%"
            border
            class="table"
            ref="multipleTable"
            :header-cell-style="{background:'#f2f6fc',color:'#606266'}"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column prop="name" label="名称" width="250" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.name}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="lang" label="类型" width="120" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.lang}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="banner" label="Banner" width="120" align="center">
              <template slot-scope="scope">
                <div class="demo-image__preview">
                  <el-image style="width: 40px; height: 40px" :src="scope.row.banner" @click="open(scope.row.banner)"></el-image>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="url" label="Url地址" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.url}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="verify" label="审核用户" width="120" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.verify==0?'不需要':'需要'}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="disabled" label="状态" width="120" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.disabled==0?'启用':'禁用'}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="createDate" label="创建时间" width="180"  align="center">
              <template slot-scope="scope">
                <span>{{scope.row.createDate}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="180" align="center">
              <template slot-scope="scope">
                <el-button type="text" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
                <el-button type="text" class="red" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table></div>
          <div class="fb"><el-pagination
            class="pag"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            background
          ></el-pagination></div>
        </div>
        <DeleteDialog
          :delVisible="delVisible"
          @deleteData="deleteData"
          @handleCloseVisible="handleCloseVisible"
        ></DeleteDialog>
        <EditRegisterUI :editShow="editShow" :editData="editData" @backFunStu="getFunStu"></EditRegisterUI>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import EditRegisterUI from "../../components/major/EditRegisterUIManage";
import DeleteDialog from "../../components/public/DeleteConfim";

export default {
  data() {
    return {
      total: 0, //总条数
      currentPage: 1, //初始页
      pagesize: 10, // 每页的数据
      editData: {},
      listShow: true,
      editShow: false,
      delVisible: false,
      dataList: [],
      multipleSelection: [],
      projectId: localStorage.getItem("project_Id"),
      register_Id: ""
    };
  },
  mounted() {
    // this.tabheight=(this.$refs.getheight.offsetHeight-165)
  },
  created() {
    this.getData();
  },
  methods: {
    open(url){
      window.open(url);
    },
    handleSizeChange(val) {
      this.pagesize = val;
      this.getData();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      console.log(`当前页: ${val}`);
      this.getData();
    },
    addSubmit() {
      this.listShow = false;
      this.editShow = true;
      this.editData=null;
    },
    handleDelete(index, row) {
      this.register_Id = row.registerId;
      this.delVisible = true;
    },
    handleCloseVisible() {
      this.register_Id = "";
      this.delVisible = false;
    },
    deleteData() {
      this.$axios.delete(`/Register/${this.register_Id}`).then(res => {
          this.$message.success("删除成功！");
          this.delVisible = false;
          this.getData();
      });
    },
    // 获取数据
    getData() {
      this.$axios.get("/Register/Project/"+this.projectId).then(res => {
        if (res.data.hasError == false) {
          this.dataList = [...res.data.data];
          this.total = res.data.total;
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleEdit(index, row) {
      this.editData = row;
      this.listShow = false;
      this.editShow = true;
    },
    getFunStu() {
      this.editData=null;
      this.listShow = true;
      this.editShow = false;
      this.getData();
    }
  },
  components: {
    EditRegisterUI,
    DeleteDialog
  }
};
</script>
<style lang="scss" scope>
.pag {
  position: absolute;
  bottom: 0;
}

.table-wrap {
  margin-left: 10px;
  height: 100%;
}
.el-main {
  border-radius: 5px;
  position: relative;
}
.uers-right {
  float: right;
}
.uers-right-buttom{
  margin-bottom: 19px;
}
.handle-bottom{
    padding-bottom: 20px;
}
.import-bnt {
  float: right;
}
.el-upload--text {
  border: 0;
}
</style>